<template>
  <div>
    <el-cascader
        ref="cascader"
        v-model="selectedOptions"
        :options="options"
        @blur="handleChange"

        popperClass="multi-choose"
    ></el-cascader>
    <el-button @click="focusCascader">聚焦 Cascader</el-button>


    <el-button @click="clickTest">点击</el-button>
<!--    <About :line-chart-data="lineChartData"/>-->
  </div>
</template>

<script>
import About from "@/components/About.vue";

export default {
  name:"test-t",
  components:{
    About
  },
  data() {
    return {
      a:0,
      selectedOptions: [],
      options: [

        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致'
                },
                {
                  value: 'fankui',
                  label: '反馈'
                }
              ]
            }
          ]
        }
      ],
      lineChartData:{
        dataSeries:[
          {name: '坍塌压力', data:null},
          {name: '破裂压力', data:null}
        ],
        xAxisData:[],
      },
    };
  },
  watch: {
    lineChartData:{
      handler(newVal, oldVal) {
        console.log('user 对象发生变化:', newVal);
      },
      deep: true,  // 深度监听
    }
  },

  methods: {
    handleChange(value) {
      console.log("blur",value);
    },
    focusCascader() {
      console.log("focusCascader",this.$refs.cascader.$children[0].focus())
      this.$refs.cascader.toggleDropDownVisible();
    },
    clickTest(){
      let number = this.a ++;

      this.lineChartData.dataSeries[0].data =[number];
      console.log("this.lineChartData",this.lineChartData)
    }
  }
};
</script>


<style lang="scss" >
// 级联选择器样式
.multi-choose{
  .el-cascader-panel {
    font-size: 7vh!important;

    span{
      color: red;
    }
  }
  .el-cascader-menu{

  }
}
</style>